<template>
  <div>
    <van-nav-bar
      title="商品详情"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 头部图片 -->
    <div class="topimage-div">
      <van-swipe :autoPlay="1000" :width="375" :height="375">
        <van-swipe-item v-for="item in goodsInfo.IMAGE" :key="item._id">
          <img v-lazy="item" alt="" width="100%" height="100%" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="goods-txt">
      <div class="goods-price">
        价格：￥
        <span>
          {{ goodsInfo.PRESENT_PRICE | moneyFilter }}
        </span>
      </div>
      <div class="goods-name">{{ goodsInfo.NAME }}</div>
    </div>

    <div>
      <van-tabs swipeable sticky>
        <van-tab title="商品详情">
          <div
            class="detail"
            v-for="(item, index) in goodsInfo.DETAIL"
            :key="index"
          >
            <van-image :src="item" lazy-load />
          </div>
        </van-tab>
      </van-tabs>
    </div>

    <!-- 底部加入购物车和购买按钮 -->
    <div class="goods-bottom">
      <van-goods-action>
      <van-goods-action-icon icon="cart-o" text="加入购物车" @click="addGoodToCart" />
      <van-goods-action-icon icon="cart-circle-o" text="进入购物车" @click="goCart" />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="goOrder"
      />
    </van-goods-action>
        
    </div>
  </div>
</template>

<script>
import { getGoodsDetail,getCulturalGoodsDetail } from '@/api/api.config.js'
import { Toast } from 'vant'
import { toMoney } from '@/filter/moneyFilter'
export default {
  created() {
    this.getGoodsDetail()
  },
  data() {
    return {
      goodsId: '',
      type: '',
      goodsInfo: {},
    }
  },
  methods: {
    // 获取商品详情 - 页面初始化就能够调用
    async getGoodsDetail() {
      // 这样写存在问题 如果商品详情页面刷新一下，this.$route.params.goodsId就会没了 当前页面就会报错
      // this.goodsId = this.$route.params.goodsId
      //   ? this.$route.params.goodsId
      //   : this.$route.query.goodsId
      if (this.$route.params && this.$route.params.goodsId) {
        this.goodsId = this.$route.params.goodsId
        this.type = this.$route.params.type || 'normal'
        this.$store.commit('setGoodsId', this.goodsId)
        this.$store.commit('setType', this.type)
      } else if (this.$route.query && this.$route.query.goodsId) {
        this.goodsId = this.$route.query.goodsId
        this.type = this.$route.query.type || 'normal'
        this.$store.commit('setGoodsId', this.goodsId)
        this.$store.commit('setType', this.type)
      } else {
        this.goodsId = this.$store.state.goodsId
        this.type = this.$store.state.type || 'normal'
      }
      try {
        let res
        if (this.type === 'cultural') {
          res = await getCulturalGoodsDetail({
            goodsId: this.goodsId,
          })
        } else {
          res = await getGoodsDetail({
            goodsId: this.goodsId,
          })
        }
        console.log(res)
        if (res.code === 200 && res.message) {
          this.goodsInfo = res.message
        } else {
          Toast('服务器错误，数据取得失败')
        }
      } catch (error) {
        console.log(error)
      }
    },

    // 把商品添加到购物车里面去
    addGoodToCart() {
      let userInfo = this.$store.state.userInfo
      if (!(userInfo && userInfo.userName)) {
        this.$toast.fail('尚未登录，请先登录')
        this.$router.push('/my')
        return
      }
      let cartInfo = this.$store.state.cartInfo
      let isHaveGood = cartInfo.find((item) => item.goodsId === this.goodsId)
      if (!isHaveGood) {
        let newCartInfo = {
          goodsId: this.goodsInfo._id,
          Name: this.goodsInfo.NAME,
          price: this.goodsInfo.PRESENT_PRICE,
          image: this.goodsInfo.IMAGE1,
          count: 1,
          isChecked: true, // 默认这个商品是选中的状态
        }
        cartInfo.push(newCartInfo)
        this.$store.commit('setCartInfo', cartInfo)
        this.$toast.success('添加购物车成功')
      } else {
        // 如果存在商品 就让数量加一个
        cartInfo.forEach((item) => {
          if (item.goodsId === isHaveGood.goodsId) {
            item.count++
          }
        })
        this.$store.commit('setCartInfo', cartInfo)
        this.$toast.success('添加购物车成功')
      }
    },

    // 把商品删除
    deleteCartGoods() {},

    // 返回到上一页
    onClickLeft() {
      this.$router.go(-1)
      this.$store.commit('setGoodsId', '')
      this.$store.commit('setType', '')
    },

    // 前往购物车
    goCart() {
      this.$router.push({
        path: '/cart'
      })
    },

    // 点击跳转到订单页面
    goOrder() {
      // 商品信息要增加一条过去，购买了几个
      // 这个1后续可以扩展和新增
      this.goodsInfo['BUYNUM'] = 1
      this.$store.commit('setOrderList', [this.goodsInfo])
      this.$router.push({path: '/order'})
    }
  },
  filters: {
    moneyFilter(money) {
      return toMoney(money)
    },
  },
}
</script>

<style scoped lang="less">
::v-deep.van-nav-bar {
    background-color: #07c160;
    .van-nav-bar__title {
        color: #fff;
        font-weight: 700;
    }
    .van-icon {
      color: #fff;
    }
}
.detail {
  font-size: 0px;
}
.goods-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.goods-bottom div {
  flex: 1px;
}
.goods-txt {
  margin-top: 9px;
  padding: 12px 12px 0;
  text-align: left;
}
.goods-price {
  color: #ff5000;
  span {
    font-size: 24px;
  }
}
.goods-name {
  margin-top: 10px;
}
</style>
